import { h } from 'vue';
import { NTag } from 'naive-ui';
import type { TagProps } from 'naive-ui';
import type { CustomNodeData, NodeStatus } from './types';

interface NodeStatusConfig {
  type: string;
  color: string;
  textColor: string;
  base64: string;
  flag64: string;
}

export const nodeStatus: Record<NodeStatus, NodeStatusConfig> = {
  MILESTONE: {
    type: '里程碑',
    color: '#5b5b5b',
    textColor: '',
    base64: '',
    flag64: ''
  },
  NOT_STARTED: {
    type: '未开始',
    color: '#CCCDD0',
    textColor: '#5b5b5b',
    base64: ``,
    flag64: ``
  },
  DELAYED: {
    type: '已延期',
    color: '#B81111',
    textColor: '#dccbcb',
    base64: ``,
    flag64: ``
  },
  PAUSED: {
    type: '已暂停',
    color: '#0E42D2',
    textColor: '#dae0f0',
    base64: ``,
    flag64: ``
  },
  IN_PROGRESS: {
    type: '进行中',
    color: '#E1BE0D',
    textColor: '#4f4304',
    base64: ``,
    flag64: ``
  },
  COMPLETED: {
    type: '已完成',
    color: '#33C73D',
    textColor: '#084e0c',
    base64: ``,
    flag64: ``
  },
  COMPLETED_EARLY: {
    type: '提前完成',
    color: '#CCFF99',
    textColor: '#42681d',
    base64: ``,
    flag64: ``
  },
  COMPLETED_LATE: {
    type: '延期完成',
    color: '#CC6699',
    textColor: '#4b092a',
    base64: ``,
    flag64: ``
  }
};

export function getNodeIcon(node: CustomNodeData) {
  if (!node.status) return '';

  const type = node.milestone ? 'flag64' : 'base64';

  return nodeStatus[node.status][type];
}

export function getNodeStatusTag(state: NodeStatus, tagProperty?: TagProps) {
  const { textColor, color, type } = nodeStatus[state] || {};

  return h(
    NTag,
    {
      color: { textColor, color },
      bordered: false,
      size: 'small',
      ...tagProperty
    },
    {
      default: () => type
    }
  );
}
